<template>
  <view class="content" ref='w' @touchmove.stop.prevent="stop()">
     <view class="content__bgi">
       <view class="content__bgi__hight">
         <view class="content__bgi__carddate">
             <view class="content__bgi__carddate--cricle content__bgi__carddate--cricle--left">
             </view>
             
             <view class="content__bgi__carddate--cricle content__bgi__carddate--cricle--right">
             </view>
             <view class="content__bgi__carddate--rectangle">
               <view class="--f" ref="img">
                 <image class="img" src="../../static/进度条.png"></image>
               </view>
               <view class="--left" ref="left">
                 
               </view>
               <view class="--right" ref="right">
                 
               </view>
             </view>
         </view>
          <view class="content__bgi__cardmemory">
              <view class="content__bgi__cardmemory--start" @click="start()">
                <view class="--start --o">
                  <view class="content__bgi__cardmemory--start--font" >
                    开始
                  </view>
                </view>
              </view>
              <view class="content__bgi__cardmemory--restart" @click="restart()">
                <view class="--restart --o">
                  <view class="content__bgi__cardmemory--start--font">
                    复习
                  </view>
                  
                </view>
              </view>
          </view>
       </view>
     </view>
  </view>
</template>

<script>
  import token from '../../utils/Storage.js'
  import jie from '../../utils/jiekou.js'
  const {getWrongWord} = jie
  const {set} = token
  const {timeDay} =token
  export default {
    data() {
      return {
        count:0,
        flag:1,
        booler:true
      }
    },
    onLoad() {
      
    },
    onShow() {
      this.getNorecite();
    },
    methods: {
      /*确定进度条*/
      timeLine(c){
        if(c==0){
          this.count=100;
        }
        else if(c==20){
          this.count=0;
        }
        else{
          this.count= (c/20)*100;
        }
        this.$nextTick(()=>{
          this.$refs.right.$el.style.width=this.count+'%';
          this.$refs.left.$el.style.width=(100-this.count)+'%';
          let shu;
          if(c>=15&&c<20){
             shu= ((-4)*c)+60
          }
          else if(c>=10&&c<15){
             shu= ((-4)*c)+67
          }
          else if(c>=5&&c<10){
             shu= ((-4)*c)+72
          }
          else if(c>0&&c<5){
             shu= ((-4)*c)+76
          }
          else if(c==20){
            shu=80
          }
          else if(c==0){
            shu=-20
          }
          console.log(this.$refs.img.$el.style.left=(shu)+'%')
        })
      },
      /*获取未背单词*/
      getNorecite(){
        uni.http.get("/api/word/resend",{},{}).then((res)=>{
          this.timeLine(res.rows.length);
        })
      },
      /*start*/
     async start(){
      await timeDay().then((res)=>{
         this.booler=res;
       });
       console.log(this.booler)
        if(!(this.booler)){
          console.log('不是当天进入了这里')
          set(0);
       }
       
       await uni.getStorage({
          key:"succeed"
        }).then((res)=>{
          this.flag= res[1].data;
          console.log(this.flag);
        }).catch((err)=>{
          console.log('进入了set');
          set(0);
          this.flag=0;
        });
        if(this.flag==0){
          uni.navigateTo({
          url:'/pages/index/index?bool='+this.booler
        });
        }
        else{
          uni.showModal({
            content:"今天完成啦",
            showCancel:false
          })
        }
      },
      
   async restart(){
      let length=0;
      await  getWrongWord().then((res)=>{
            length = res.rows.length;
        });
        console
        if(length<20){
          uni.showModal({
            content:"所需复习单词过少",
            showCancel:false
          });
        }
       else uni.navigateTo({
          url:"/pages/oldindex/oldindex"
        })
    }
  },
}
</script>

<style lang="less">
.content{
  --windowHight:100vh;
  height: var(--windowHight);
  .content__bgi{
    width: 100%;
    height: 100%;
    // background-color: aqua;
    background: url("../../static/r.png") repeat fixed center;
    background-size: 100% 100%;
  }
}
.content__bgi__carddate{
  --rectangleleft:40%;
  --rectangleright:60%;

    height: 80px;
    position: relative;
    .content__bgi__carddate--cricle{
      width: 26px;
      height: 26px;
      border-radius: 50%;
    }
    .content__bgi__carddate--cricle--left{
      position: absolute;
      left: 7%;
      top: 40%;
      background-color: rgba(81, 194, 209, 1);
      z-index: 2;
    }
    .content__bgi__carddate--cricle--right{
      position: absolute;
      left: 87%;
      top: 40%;
      background-color: rgba(255, 192, 203, 1);
      z-index: 3;
    }
    .content__bgi__carddate--rectangle{
      width: 80%;
      height: 17px;
      position: absolute;
      left: 8%;
      top: 45%;
      z-index: 3;
      display: flex;
      position: relative;
      --rectangletu:80%;
      --rectangletutop:-270%;
      .--f{
        position: absolute;
        top: var(--rectangletutop);
        left: var(--rectangletu);
        .img{
          width: 150px;
          height: 87px;
          z-index: 5;
        }
      }
      .--left{
        width: var(--rectangleleft);
        height: 17px;
        background-color: rgba(81, 194, 209, 1);
      }
      .--right{
        width: var(--rectangleright);
        height: 17px;
        background-color: rgba(255, 192, 203, 1);
      }
    }
}
.content__bgi__cardmemory{
    display: flex;
    height: 200px;
    .--o{
      width: 170px;
      height: 100px;
      border-radius: 30px;
      position: relative;
    }
    .content__bgi__cardmemory--start--font{
      position: absolute;
      left: 35%;
      top: 35%;
      font-size: 24px;
      font-weight: 800;
      color: white;
    }
    .content__bgi__cardmemory--start{
      width: 50%;
      height: 100%;
      position: relative;
      .--start{
         position: absolute; 
         left: 50%; top: 50%;
         transform: translate(-50%, -50%); 
        border: 3px solid rgba(81, 194, 209, 1);
      }
    }
    .content__bgi__cardmemory--restart{
      width: 50%;
      height: 100%;
      position: relative;
      .--restart{
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%); 
        border: 3px solid rgba(255, 192, 203, 1);
      }
    }
}
.content__bgi__hight{
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 280px;
}
</style>
